<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/Classifypage.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/css/swiper.min.css" rel="stylesheet">
    <title>分类页面</title>
</head>
<body>
    <div class="web">
        <!-- 头部 -->
        <header>
            <div class="title-product">
                <div>
                    <a href="file:///Users/mr.f/Desktop/fengxiayong/Grouponproject/Detailedpage.html">
                        <input type="submit" value="Back">
                    </a>
                </div>
                <div>
                    <p>分类</p>
                </div>
                <div class="drop-select">
                    <select>
                        <option>广州市</option>
                        <option>深圳市</option>
                        <option>惠州市</option>
                    </select>
                </div>
            </div>
        </header>
        <main>
        <div class="ifymain">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div>
                            <img src="./img/美食.png" alt=""> 
                            <p>美食</p>
                        </div>
                        <div>
                            <img src="./img/电影.png" alt="">
                            <p>电影</p>
                        </div>
                        <div>
                            <img src="./img/运动.png" alt="">
                            <p>运动</p>
                        </div>
                        <div>
                            <img src="./img/唱歌.png" alt="">
                            <p>唱歌</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div>
                            <img src="./img/美食.png" alt=""> 
                            <p>美食</p>
                        </div>
                        <div>
                            <img src="./img/电影.png" alt="">
                            <p>电影</p>
                        </div>
                        <div>
                            <img src="./img/运动.png" alt="">
                            <p>运动</p>
                        </div>
                        <div>
                            <img src="./img/唱歌.png" alt="">
                            <p>唱歌</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div>
                            <img src="./img/美食.png" alt=""> 
                            <p>美食</p>
                        </div>
                        <div>
                            <img src="./img/电影.png" alt="">
                            <p>电影</p>
                        </div>
                        <div>
                            <img src="./img/运动.png" alt="">
                            <p>运动</p>
                        </div>
                        <div>
                            <img src="./img/唱歌.png" alt="">
                            <p>唱歌</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div>
                            <img src="./img/美食.png" alt=""> 
                            <p>美食</p>
                        </div>
                        <div>
                            <img src="./img/电影.png" alt="">
                            <p>电影</p>
                        </div>
                        <div>
                            <img src="./img/运动.png" alt="">
                            <p>运动</p>
                        </div>
                        <div>
                            <img src="./img/唱歌.png" alt="">
                            <p>唱歌</p>
                        </div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>

            <div class="groupone">
                <div class="preferential">
                    <img src="./img/图层9.png" alt=""><span>美食类</span>
                </div>
                <div class="imggd">
                    <span>更多</span> <img src="./img/形状4副本.png" alt="">
                </div>                       
            </div>

            <div class="img-box">
                <img src="./img/图层10.png" alt="">
                <img src="./img/图层11.png" alt="">
                <img src="./img/图层12.png" alt="">
                <img src="./img/图层13.png" alt="">
            </div>

            <div class="grouptwo">
                <div class="preferential">
                    <img src="./img/图层777777.png" alt=""><span>运动类</span>
                </div>
                <div class="imggd">
                    <span>更多</span> <img src="./img/形状4副本.png" alt="">
                </div>                       
            </div>

            <div class="img-box">
                <img src="./img/图层14.png" alt="">
                <img src="./img/图层15.png" alt="">
                <img src="./img/图层16.png" alt="">
                <img src="./img/图层17.png" alt="">
            </div>

            <div class="grouptwo">
                <div class="preferential">
                    <img src="./img/电影类.png" alt=""><span>电影类</span>
                </div>
                <div class="imggd">
                    <span>更多</span> <img src="./img/形状4副本.png" alt="">
                </div>                       
            </div>

            <div class="img-box">
                <img src="./img/图层18.png" alt="">
                <img src="./img/图层19.png" alt="">
                <img src="./img/图层18.png" alt="">
                <img src="./img/图层19.png" alt="">
            </div>

        </div>
        </main>
    <!-- 底部 -->
    <footer>
        <div class="homefooter">
            <div>
                <a href="file:///Users/mr.f/Desktop/fengxiayong/Grouponproject/Homepage.html">
                    <img src="./img/首页2.png" alt="">
                    <p>首页</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/分类42.png" alt="">
                    <p>分类</p>
                </a>
            </div>
            <div>
                <a href="file:///Users/mr.f/Desktop/fengxiayong/Grouponproject/Findpage.html">
                    <img src="./img/形状7副本.png" alt="">
                    <p>发现</p>
                </a>
            </div>
            <div>
                <a href="file:///Users/mr.f/Desktop/fengxiayong/Grouponproject/Mypage.html">
                    <img src="./img/我的.png" alt="">
                    <p>我的</p>
                </a>
            </div>
        </div>
    </footer>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/js/swiper.min.js"></script>
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    
    // 如果需要分页器
    pagination: '.swiper-pagination',
  })        
  </script>
</body>
</html>